<div class="content-section introduction">
    <div>
        <span class="feature-title">Get Started</span>
        <span>PrimeNG is a rich set of open source native Angular UI components.</span>
    </div>
</div>

<div class="content-section documentation">
    <h3 style="margin-top:0px">Download</h3>
    <p>PrimeNG is available at npm, if you have an existing application run the following command to download it to your project.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
npm install primeng --save
</code>
</pre>

    <h3>Load Configuration</h3>
    <p>PrimeNG is distributed in commonjs format, a module manager of your choice is required and this guide provides samples for SystemJS, WebPack and Angular CLI.</p>

    <h3>Import</h3>
    <p>UI components are configured as modules, once PrimeNG is downloaded and configured, modules and apis can be imported from 'primeng/*' shorthand in your application code. Documentation
        of each component states the import path.
    </p>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;AccordionModule&#125; from 'primeng/accordion';     //accordion and accordion tab
import &#123;MenuItem&#125; from 'primeng/api';                 //api
</code>
</pre>

    <h3>Dependencies</h3>
    <p>Majority of PrimeNG components (95%) are native and there are some exceptions having 3rd party dependencies. In addition, components require font-awesome for icons.</p>

    <p>The css dependencies are as follows, font awesome, theme of your choice and structural css of components.</p>
<pre>
<code class="language-html" pCode ngNonBindable>
&lt;link rel="stylesheet" type="text/css" href="YOUR_PATH/font-awesome.min.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/omega/theme.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" /&gt;
</code>
</pre>
    
    <p>Here is the list of components with 3rd party dependencies.</p>

    <div class="doc-tablewrapper">
        <table class="doc-table">
            <thead>
                <tr>
                    <th>Component</th>
                    <th>Dependency</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Schedule</td>
                    <td>FullCalendar and Moment.js</td>
                </tr>
                <tr>
                    <td>Editor</td>
                    <td>Quill Editor</td>
                </tr>
                <tr>
                    <td>GMap</td>
                    <td>Google Maps</td>
                </tr>
                <tr>
                    <td>Charts</td>
                    <td>Charts.js 2.7.x</td>
                </tr>
                <tr>
                    <td>Captcha</td>
                    <td>Google Recaptcha</td>
                </tr>
            </tbody>
        </table>
    </div>

    <h3>Animations with Angular 4+</h3>
    <p>Various components utilize angular animations to improve the user experience, starting with Angular 4 animations have their own module so you need
    to import <i>BrowserAnimationsModule</i> to your application. If you prefer not to use <i>NoopAnimationsModule</i> instead.</p>

<pre>
<code class="language-markup" pCode ngNonBindable>
npm install @angular/animations --save
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;BrowserModule&#125; from '@angular/platform-browser';
import &#123;BrowserAnimationsModule&#125; from '@angular/platform-browser/animations';

@NgModule(&#123;
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        //...
    ],
    //...
&#125;)
export class YourAppModule &#123; &#125;
</code>
</pre>

    <h3>Angular CLI Integration</h3>
    <p>Angular CLI is the official CLI tool for Angular. We strongly suggest using Angular CLI when starting an Angular project.</p>

    <h4>Dependencies</h4>
    <p>Add PrimeNG and FontAwesome as a dependency</p>
<pre>
<code class="language-js" pCode ngNonBindable>
"dependencies": &#123;
  //...
  "primeng": "^5.2.0",
  "font-awesome": "^4.7.0"
&#125;,
</code>
</pre>

    <h4>Styles Configuration</h4>
    <p>Configure required styles at the styles section, example below uses the Omega theme.</p>
<pre>
<code class="language-js" pCode ngNonBindable>
"styles": [
  "../node_modules/font-awesome/css/font-awesome.min.css",
  "../node_modules/primeng/resources/themes/omega/theme.css",
  "../node_modules/primeng/resources/primeng.min.css",
  //...
],
</code>
</pre>

    <p>That is all, you may now import PrimeNG components, for a working example visit the <a href="https://github.com/primefaces/primeng-quickstart-cli">PrimeNG CLI QuickStart</a> sample at GitHub.</p>

    <h3>Angular Seed Integration</h3>
    <p>Angular2 Seed is an alternative modular starter project, there is an <a href="https://github.com/mgechev/angular2-seed/wiki/Add-PrimeNG">official entry</a> at the project wiki
        describing how to use PrimeNG with seed.</p>

    <h3>QuickStart with System.js</h3>
    <p><a href="https://angular.io/docs/ts/latest/quickstart.html">The official quickstart example</a> of Angular uses System.JS and we
    have extended it to add PrimeNG. Visit the <a href="https://github.com/primefaces/primeng-quickstart">PrimeNG-Quickstart</a> at GitHub for an example.</p>

    <h3>QuickStart with Webpack</h3>
    <p>There is also a webpack version of the <a href="https://angular.io/docs/ts/latest/guide/webpack.html">The official quickstart example</a> of Angular and we
    have extended it to add PrimeNG. Visit the <a href="https://github.com/primefaces/primeng-quickstart-webpack">PrimeNG-Quickstart-Webpack</a> at GitHub for an example.</p>

    <h4>External Articles</h4>
    <ul>
        <li><a href="https://yakovfain.com/2016/10/06/primeng-ui-components-for-angular-2/">PrimeNG - UI Components for Angular 2</a> - Yakov Fain's Blog</li>
        <li><a href="https://yakovfain.com/2016/10/28/adding-primeng-ui-components-to-angular-cli-project/">Adding PrimeNG UI components to Angular CLI projects</a> - Yakov Fain's Blog</li>
        <li><a href="https://blog.davincisoftware.sk/primeng-web-component-framework-based-on-angularjs-2">PRIMENG - WEB COMPONENT FRAMEWORK BASED ON ANGULARJS 2</a> - DaVinci IT Blog</li>
        <li><a href="http://blogs.bytecode.com.au/glen/2016/10/27/primeng-with-angular-cli.html">PrimeNG with CLI</a> - Glen Smith</li>
        <li><a href="http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/3304/Hello-World-Angular-2-Data-Sample-Using-JavaScriptServices-Net-Core-and-PrimeNg.aspx">Hello World Angular 2+ Data Sample Using JavaScriptServices .Net Core and PrimeNg</a></li>
        <li><a href="http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/3298/An-Angular-2-Tree-With-CRUD-Functionality.aspx">An Angular 2 Tree With CRUD Functionality</a></li>
    </ul>
</div>
